<template>
<div class="main">
    <div class="pos">
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">序列号</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{$store.state.deviceinfo[INDEX].serial}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">名称</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{$store.state.deviceinfo[INDEX].name}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">导入插件</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{$store.state.deviceinfo[INDEX].plugm}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">接口类型</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{$store.state.deviceinfo[INDEX].media}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">状态</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light">{{$store.state.deviceinfo[INDEX].status}}</div>
            </el-col>
        </el-row>

          <el-button type="text" @click="open">
            <h2>确认修改</h2>
        </el-button>
    </div>
    <!-- <h1 style="position: absolute; bottom: 3%; right: 5%;"> 10511工作室&nbsp;版权所有</h1> -->
</div>
</template>

<script>
//引入mapState

export default {
    data() {
        return {

        }
    },
    computed: {
        INDEX() {
            return this.$store.state.row.index;
        }
    },
    methods: {
        open() {
            this.$confirm('此操作将修改该设备信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });
            });
        }
        },

    }
</script>

<style scoped>
.el-button{
    text-align: center;
    background-color: aquamarine;
    margin-left: 50%;
    color:black;
}
.main {
    display: block;
    height: 600px;
    width: 100%;
}

.pos {
    margin-left: 10%;
    display: block;
    position: absolute;
    width: 800px;
    margin-top: 60px;
}

.el-row {
    margin-left: 25%;
    height: 80px;
}

.el-col {
    text-align: center;
    width: 200px;
    height: 80px;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
</style>
